<template>
  <div class="login">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>
    <div class="logo">
      <van-image
        round
        width="5rem"
        height="5rem"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdown.51rc.com%2Fimagefolder%2FLogo%2FL10530000%2F10521741_20161125114949.gif&refer=http%3A%2F%2Fdown.51rc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667891856&t=5e646252d8a8d60f0c28804522636150"
      />
      <p>让每个人都能享受科技的乐趣</p>
    </div>
    <van-form @submit="onSubmit" class="denglu">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="邮箱/手机号码/爱坤ID"
          autocomplete
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          autocomplete
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <van-checkbox v-model="checked" class="checked"
        >已阅读并同意爱坤帐号 用户协议 和 隐私政策</van-checkbox
      >
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">登录</van-button>
         <p class="zhuce" @click="zhuce">没有账号?去注册</p>
      </div>
    </van-form>
  </div>
</template>

<script>

  import {reqLogin} from '../../api/user';
  import {setToken} from '../../util/auth';
  import { Toast } from 'vant';

 export default {
  data(){
    return{
      value1:0,
      value2:"a",
      option1:[
        {text:"选择语言",value:0},
        { text: "中文(简体)", value: 1 },
        { text: "中文(繁體)", value: 2 },
        { text: "English", value: 3 },
      ],
      username:"",
      password:"",
      checked:false,
    };

  },
  methods: {
    zhuce(){
      this.$router.push('/register')
    },
    async onSubmit(values) {
      console.log("submit", values);


      const result = await reqLogin(values);

      // console.log(result);
      if (this.checked == true) {
        // console.log(1);
        if (result.code == "success") {
          setToken(result.token); //生成cookie
          // this.$store.commit("setToken", result.token); //存入vuex里面
          // console.log(this.$store.state.token); 

          //存入本地
          localStorage.setItem("token",JSON.stringify(values));

          Toast("登录成功");

        
          // console.log(values.userName);
        }else{
          Toast('登录成功')
          this.$router.push("/mine");
        }
      } else {
        Toast("请勾选用户协议");
      }
    },
  },
  created() {},
  mounted() {},
  components: {},
 }
</script>
<style scoped>
.logo{
  text-align: center;
}
.logo p{
  color: rgb(189, 183, 183);
}
.denglu{
  margin-top: 50px;
}
.checked{
  font-size: 13px;
  margin: 15px 0 15px 16px;
}
.zhuce{
  text-align: center;
  font-size: 10px;
  margin-top: 20px;
}
</style>
